<template>
	<div>
		<router-view  :style='{paddingBottom:footerShow==true ? "0.6rem":""}'/>
		<span v-if='!token' class='unloginBtn'><a-button  @click='login'  style='font-size: 0.16rem'>登录后查看</a-button></span>
		<ul class='footer ' v-show='footerShow'>
			<li class='one' :class='{active:$route.path=="/home"}'><router-link to='/home'>首页</router-link></li>
			<li class='two' :class='{active:$route.path=="/product"}'><router-link to='/product#1'>产品</router-link></li>
			<li class='three' :class='{active:$route.path=="/release"}'><router-link to='/release'>发布</router-link></li>
			<li class='four' :class='{active:$route.path=="/userCenter"}'><router-link to='/userCenter'>我的</router-link></li>
		</ul>
	</div>
</template>

<script > 
	import { mapGetters } from 'vuex'
	export default{
		name:'home',
		data(){
			return { 
				token:sessionStorage.getItem('token')
			}
		},
		created(){
			 
		},
		methods:{
			login(){
				this.$router.push('/login')
			}
		},
		computed:{
			...mapGetters(['footerShow'])
		},
	}
</script>

<style scoped="scoped">
	.unloginBtn{position: absolute;bottom: 1rem;display: inline-block;width: 100%;text-align: center;}
	 
.footer{background:#fff;padding:0.06rem 0.15rem ;border-top:1px solid #d9d9d9;display: table;width: 100%;position: fixed;bottom:0;}
.footer li {display: table-cell;/*width: 20%;*/text-align: center;font-size: 0.12rem;}
.footer li a{display: inline-block;width: 100%;padding-top: 0.3rem;}
.footer li.one{background:url(../../assets/img/icon-home.png) no-repeat top center/0.25rem 0.25rem;}
.footer li.two{background:url(../../assets/img/icon-product.png) no-repeat top center/0.25rem 0.25rem;}
.footer li.three{background:url(../../assets/img/icon-release.png) no-repeat top center/0.25rem 0.25rem;}
.footer li.four{background:url(../../assets/img/icon-user.png) no-repeat top center/0.25rem 0.25rem;}

.footer li.one.active{background:url(../../assets/img/icon-home-a.png) no-repeat top center/0.25rem 0.25rem ;}
.footer li.two.active{background:url(../../assets/img/icon-product-a.png) no-repeat top center/0.25rem 0.25rem ;}
.footer li.three.active{background:url(../../assets/img/icon-release-a.png) no-repeat top center/0.25rem 0.25rem ;}
.footer li.four.active{background:url(../../assets/img/icon-user-a.png) no-repeat top center/0.25rem 0.25rem ;}
</style>